import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Card, List, Avatar ,Badge, Button } from 'antd'
import { setTodoState } from '../../store/msg/actionCreators.js'
const mapStateToProps = (state)=>{
  return {
    msgList: state.msg.msgList
  }
}
const mapDispatchToProps = (dispatch)=>{
  return {
    setTodoState: (index)=>{
      dispatch(setTodoState(index))
    }
  }
}
@connect(mapStateToProps, mapDispatchToProps)
class MsgList extends Component {
  render() {
    return (
      <Card title="消息中心">
        <List
            itemLayout="horizontal"
            dataSource={this.props.msgList}
            style={{width: 600}}
            renderItem={(item,index) => (
              <List.Item
                actions={[
                  <Button 
                    size="small" 
                     type="primary" 
                     onClick={()=>{
                       this.props.setTodoState(index)
                     }}
                     disabled={ item.isCompleted }
                     key="read">{ item.isCompleted?'已完成':'点击完成' }</Button>, 
                  <Button size="small" danger key="del">删除</Button>]}
              >
                <List.Item.Meta
                  avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                  title={
                    <Badge dot={!item.isCompleted}>
                      <span>{item.title}</span>
                    </Badge>
                  }
                  description={ item.content }
                />
              </List.Item>
            )}
          />
      </Card>
    )
  }
}
export default MsgList